<template>
  <div class="progress-container">
    <div class="progress-headContent">
      <div class="title">
        <h3 style="font-weight:normal">参与项目列表</h3>
        <span style="font-size: 16px;">你可以在此提交工作进度以及查看他人的提交信息</span>
      </div>
      <img src="@/assets/background_images/progress_bg.png" class="img">
    </div>

    <el-row :gutter="20">
      <el-col v-for="item in project" :key="item.project_id" :span="8">
        <el-card shadow="hover" style="margin-bottom: 30px">
          <div slot="header" class="clearfix">
            <span>{{ item.project_name }}</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="handleClick(item.project_id)">查看进度</el-button>
          </div>
          <div class="text item">
            <span style="color: #99a9bf; margin-right: 30px">部门编号</span>
            <span style="color: #42b983">{{ item.dept_id }}</span>
          </div>
          <div class="text item">
            <span style="color: #99a9bf; margin-right: 30px">负责人</span>
            <span style="color: #42b983">{{ item.leader }}</span>
          </div>
          <div class="text item">
            <span style="color: #99a9bf; margin-right: 30px">级别</span>
            <span style="color: #42b983">{{ item.level }}</span>
          </div>
          <div class="text item">
            <span style="color: #99a9bf; margin-right: 30px">经费</span>
            <span style="color: #42b983">{{ item.funds }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getSpecificProject } from '@/api/progress'

export default {
  name: 'Progress',
  data() {
    return {
      project: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleClick(project_id) {
      this.$router.push(`/progress/${project_id}`)
    },
    fetchData() {
      getSpecificProject().then(response => {
        this.project = response.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.progress-container {
  width: 100%;
  padding: 0 300px;
  min-height: calc(100vh - 50px);
  background-color: #f0f2f5;

  .progress-headContent {
    min-height: 180px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    background-color: #f8f8ff;
    margin-bottom: 30px;

    .title {
      float: left;
      font-size: 18px;
      line-height: 1;
      padding-top: 50px;
      padding-left: 30px;
      color: #606266;
    }

    .img {
      width: 195px;
      padding-top: 50px;
      float: right;
    }
  }

  .text {
    font-size: 15px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
}
</style>
